﻿@model ContactUsModel

@{
    Assets.AppendTitleParts(Model.MetaTitle.HasValue() ? Model.MetaTitle : T("PageTitle.ContactUs").Value);
    Assets.AppendMetaDescriptionParts(Model.MetaDescription);
    Assets.AppendMetaKeywordsParts(Model.MetaKeywords);
}

<div class="page contact-page">
    <div class="page-title">
        <h1 class="h2">@T("PageTitle.ContactUs")</h1>
    </div>

    @await Component.InvokeAsync("TopicBlock", new { systemName = "ContactUs", isLead = true, bodyOnly = true }) 

    <div class="page-body">
        <zone name="contactus_top"></zone>

        @if (Model.SuccessfullySent)
        {
            <div class="alert alert-success">
                @Model.Result
            </div>        
		}
		else
		{
            <form asp-route="ContactUs" method="post" id="contact-form" class="contact-form">
                <div asp-validation-summary="ModelOnly"></div>

                <honeypot />

                <div class="form-group row">
                    <label asp-for="FullName" class="col-sm-3 col-form-label" attr-class='(Model.FullNameRequired, "required")'></label>
                    <div class="col-sm-9">
                        <input asp-for="FullName" sm-required="Model.FullNameRequired" class="remember" />
                        <span asp-validation-for="FullName"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Email" class="col-sm-3 col-form-label required"></label>
                    <div class="col-sm-9">
                        <input asp-for="Email" sm-required="true" class="remember" />
                        <span asp-validation-for="Email"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Enquiry" class="col-sm-3 col-form-label required"></label>
                    <div class="col-sm-9">
                        <textarea asp-for="Enquiry" placeholder="@T("ContactUs.Enquiry.Hint")" class="personal-message remember" rows="6"></textarea>
                        <span asp-validation-for="Enquiry"></span>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col col-sm-auto offset-sm-3 text-muted">
                        @T("Common.FormFields.Required.Hint")
                    </div>
                </div>

                <div class="row justify-content-end">
                    <div class="col-sm-9">
                        <zone name="gdpr_consent" />
                    </div>
                </div>

                <div class="form-group row">
                    <captcha sm-enabled="Model.DisplayCaptcha" class="col col-sm-auto offset-sm-3" />
                </div>

                <div class="form-group row">
                    <div class="col col-sm-auto offset-sm-3">
                        <button type="submit" name="send-email" class="btn btn-primary btn-lg btn-block">
                            @T("ContactUs.Button")
                        </button>
                    </div>
                </div>
            </form>
        }

        <zone name="contactus_bottom"></zone>
    </div>
</div>

<script sm-target-zone="scripts" data-origin="contact-us">
    $(function () {
        setRememberedFormFields("registerVals");
    });

    const form = document.getElementById('contact-form');
    form.addEventListener('focusout', (event) => {
        rememberFormFields("contact-form", "registerVals");
    });
</script>